<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>左栏弹出效果</title>
		<style>
			/* 统配 */
			*{
				font-size: 16px "微软雅黑";
				/* 无序列表：有样式----去一个样式 :列表项*/
				list-style-type: none;
				/*  无序列表：有样式----
				去全部样式：list-style-type 去列表项样式
				           list-style-position 去列表项标记位置样式
						   list-style-image  去列表项图片标记样式
						   list-style: none;
				*/
			   list-style: none;
				/* 去掉内外边距 */
				margin: 0;
				padding: 0;
			}
			/* 左栏效果
			    1.左栏空间区域   235*450  背景颜色
				2.左栏区域内容，【li】  加权 235*50，相对定位--挂靠点【固定位置】
				3.给每一个区域内容【li】 加鼠标移动上去改背景颜色
				4.左栏弹出框：400*450 加1px边框  加绝对定位--微调
			 */
			aside{
				height: 450px;
				width: 235px;
				background: #fbffd3;
				margin:20px 50px auto;
				
			}
			aside ul.sidebar li{
				height: 50px;
				width: 235px;
				/* 相对定位--挂靠点 */
				position: relative;
				text-align: center;
				line-height:50px  ;
				
			}
			aside ul.sidebar li:hover{
				background: #ffff7f;
				
			}
			aside ul.sidebar div.out{
				height: 450px;
				width: 400px;
				border: 1px solid #55ff7f;
				position: absolute;
				left: 285px;
				/* 显示与隐藏  JavaScript【JQuery框架】 */
				d isplay: none;
			}
		</style>
	</head>
	<body>
		<!-- html结构  结构化标记【语义化标签】 
		     aside元素 针对：左栏、广告 ，弹出效果....有利于SEO优化
			 之前版本通过起div+id别名方式【缺点：繁琐、定义起名、冗余】
			 
			 -->
			 <aside>
			 	<ul class="sidebar">
					<!-- 弹出框 -->
					<div class="out"></div>
			 		<li>手机</li>
			 		<li>电脑</li>
			 		<li>家具</li>
			 		<li>男装</li>
			 		<li>女装</li>
			 		<li>美妆</li>
			 		<li>房产</li>
			 		<li>母婴</li>
			 		<li>食品</li>
			 	</ul>
			 </aside>
	</body>
</html>